/*
 * @Author: lusx 
 * @Date: 2020-05-13 16:02:01 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-14 15:10:40
 */
import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { SearchBar, Icon, Tools } from 'weaver-mobile';
import { SearchAdvanced, SearchPage } from 'weaver-mobile-page';
import { toJS } from 'mobx';
const template = {
    default: [
        {
            key: 'col1',
            configs: [
                {
                    key: 'col1_row1',
                    configs: [
                        { key: 'name' },
                    ],
                },
            ],
        },
    ],
};
@inject('singleListStore')
@withRouter
@observer
export default class NewSearch extends React.Component {

    componentDidMount() {
        const { searchPage } = this.props.singleListStore;
        searchPage.setState({ template, placeholder: '请输入关键字' });
        let data = Tools.ss.getJSONObj("gvHistoryListData");
        searchPage.list.setState({ data: data || [] });
    }

    render() {
        const { searchPage } = this.props.singleListStore;
        return (
            <div>
                <SearchBar
                    placeholder='请输入关键字'
                    value={searchPage.searchValue}
                    onFocus={() => {
                        const { history } = this.props;
                        history.push(searchPage.path);
                    }}
                />
                <SearchPage
                    placeholder='请输入关键字'
                    store={searchPage}
                    type={1}
                    nameKey='name'
                    rowKey='key'
                    onClear={e => {
                        const { searchPage } = this.props.singleListStore;
                        const { list } = searchPage;
                        list.setState({ data: [] });
                    }}
                    onSubmit={(e) => {
                        // 搜索请求列表接口
                        let selectValue = '';
                        if (toJS(e).name) {
                            selectValue = toJS(e).name;
                        } else {
                            selectValue = e;
                        }

                        const { singleListStore: { init }, match: { url, params: { quicktype } },location :{pathname} } = this.props;
                        const params = { route: url, quicktype, selectValue,pathname };
                        init(params);

                        //保存搜索历史
                        let arr = toJS(searchPage.list.data);
                        if (arr.length <= 0) {
                            arr.push({ name: selectValue, key: "0" })
                        } else {
                            let index = -1;
                            let flag = false;//输入的e是否已在记录中
                            arr.map(item => {
                                if (item.name === selectValue) {
                                    flag = true;
                                    index = parseInt(item.key, 10);
                                }
                                return index;
                            })
                            if (flag) {//已在记录中
                                arr.splice(index, 1);
                                arr.slice(0, index).forEach(item => {
                                    item.key = (parseInt(item.key, 10) + 1).toString();
                                });
                                arr.unshift({ name: selectValue, key: "0" });
                            } else {//不再记录中
                                arr.forEach(item => {
                                    item.key = (parseInt(item.key, 10) + 1).toString();
                                })
                                arr.unshift({ name: selectValue, key: "0" });
                            }
                            if (arr.length > 5) {
                                arr.pop();
                            }
                        }
                        Tools.ss.set("gvHistoryListData", arr)
                        searchPage.list.setState({ data: arr })
                    }
                    }
                />
            </div>
        )
    }
}